<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useGetManOrderOne } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import NP from 'number-precision'
import { useRoute, useRouter } from 'vue-router'

const { params } = useRoute()

const { back } = useRouter()

const id = computed(() => {
    return params.id
})

const { data, isLoading: orderOneLoading } = useGetManOrderOne(id)

const isLoading = computed(() => orderOneLoading.value)

const detail = ref<any>({
    address: '',
    cityId: '',
    consignee: '',
    id: '',
    phone: '',
    projectName: '',
})
const detailColumns: PlusColumn[] = [
    {
        label: '项目名称',
        labelWidth: '100px',
        prop: 'projectName',
        valueType: 'text',
    },
    {
        label: '收货人',
        labelWidth: '100px',
        prop: 'consignee',
        valueType: 'text',
    },
    {
        label: '收货人电话',
        labelWidth: '100px',
        prop: 'phone',
        valueType: 'text',
    },

    {
        label: '收货地址',
        labelWidth: '100px',
        prop: 'cityId',
        valueType: 'text',
    },
    {
        label: '详细地址',
        labelWidth: '100px',
        prop: 'address',
        valueType: 'text',
    },
]
const submitInfo = ref<any>({
    installCost: 0,
    orderName: '',
    otherCost: 0,
    selectTime: [],
    transportationCost: 0,
})
const submitColumns: PlusColumn[] = [
    {
        colProps: {
            span: 8,
        },
        label: '订单名称',
        labelWidth: '100px',
        prop: 'orderName',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '运输费',
        labelWidth: '100px',
        prop: 'transportationCost',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '期望交货日期',
        labelWidth: '120px',
        prop: 'selectTime',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '安装费',
        labelWidth: '100px',
        prop: 'installCost',
        valueType: 'text',
    },
    {
        colProps: {
            span: 8,
        },
        label: '其他费用',
        labelWidth: '100px',
        prop: 'otherCost',
        valueType: 'text',
    },
]

const gridOptions = reactive<any>({

    columns: [
        { slots: { default: 'info' }, title: '商品详情', width: 400 },
        { field: 'brand', title: '品牌' },
        { field: 'model', title: '型号' },
        { slots: { default: 'unit' }, title: '单价/单位' },
        { field: 'quantity', title: '本次下单数量', width: 120 },
        { slots: { default: 'total' }, title: '总价' },
    ],
    data: [],
    showOverflow: false,
})

watchEffect(() => {
    if (data.value) {
        gridOptions.data = data.value?.orderProductsVOS ?? []
        detail.value = {
            address: data.value.deliveryAddress,
            cityId: `${data.value?.province}-${data.value?.city}`,
            consignee: data.value.purchaser,
            phone: data.value.purchaserPhone,
            projectName: data.value.projectName,
        }
        submitInfo.value = {
            installCost: data.value.installCost,
            orderName: data.value.orderName,
            otherCost: data.value.otherCost,
            selectTime: `${`${data.value?.expectedDeliveryStartDate} - ${data.value?.expectedDeliveryEndDate}`}`,
            transportationCost: data.value.transportationCost,
        }
    }
})
function goBack() {
    back()
}
</script>

<template>
    <ElSkeleton v-if="isLoading"
                :rows="5"
    />

    <div v-else>
        <el-card mb-20>
            <div class="info-title">
                订单信息
            </div>

            <SearchForm v-model="detail"
                        :columns="detailColumns"
                        :has-footer="false"
            />
        </el-card>

        <el-card mb-20>
            <SearchTable v-bind="gridOptions"

                         class="mb-20"
            >
                <template #info="{ row }">
                    <div class="pd-info">
                        <el-image v-if="row.skuUrl"
                                  style="width: 120px; height: 120px"
                                  class="mr-10"
                                  :src="row.skuUrl?.split(';')?.[0]"
                                  :preview-src-list="row.skuUrl?.split(';')"
                                  fit="cover"
                        />

                        <div class="pd-desc">
                            <p class="truncate w-full"
                               :title="row?.productName"
                            >
                                {{ row.productName }}
                            </p>

                            <p class="truncate w-full"
                               :title="row?.skuName"
                            >
                                规格：{{ row?.skuName }}
                            </p>

                            <p class="truncate w-full"
                               :title="row?.category"
                            >
                                品类：{{ row?.category }}
                            </p>

                            <p class="truncate w-full"
                               :title="data?.partyB"
                            >
                                供应商：{{ data?.partyB }}
                            </p>

                            <p class="truncate w-full"
                               :title="row?.attribute"
                            >
                                规格属性：{{ row?.attribute }}
                            </p>
                        </div>
                    </div>
                </template>

                <template #total="{ row }">
                    <span style="color: red;">￥{{ NP.round(row.agreementPrice * (row.quantity ?? 0), 2) }}</span>
                </template>

                <template #unit="{ row }">
                    <span style="color: red;">￥{{ row.agreementPrice }}/{{ row?.unit }}</span>
                </template>
            </SearchTable>

            <SearchForm v-model="submitInfo"
                        :columns="submitColumns"
                        :has-footer="false"
            />
        </el-card>

        <el-card>
            <div class="flex gap-15 justify-center">
                <el-button @click="goBack">
                    返回
                </el-button>
            </div>
        </el-card>
    </div>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
    margin-bottom: 20px;
}

.footer-btn {
    text-align: center;
}

.pd-info {
    display: flex;
    // width: 100%;
    padding: 10px 0;

    img {
        width: 175px;
        margin-right: 20px;
    }

    .pd-desc {
        flex: 1;
        width: 1px;
        color: #9da1ae;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p:first-child {
            font-size: 15px;
            color: #000;
            font-weight: 600;
        }
    }
}
</style>
